<template>
	<div class="">
		<van-nav-bar title="退款账单" left-arrow @click-left="onClickLeft" />
		<div class="refund">
			<!-- height: 136px; -->
			<div class="bg-f" style="margin:24px  0px 0px;">
				<div class="" style="padding: 15px 16px 15px 15px;">
					<form action="/">
						<!-- search 事件在点击键盘上的搜索/回车按钮后触发，cancel 事件在点击搜索框右侧取消按钮时触发（自己改为了搜索）。 -->
						<van-search style="color: #0580FF;" v-model="amount" show-action placeholder="请输入查询金额"
							@search="tabtoplist">
							<template #action>
								<div @click="tabtoplist">搜索</div>
							</template>
						</van-search>
					</form>
					<div class="flex-space ">
						<div class="flex-space refund_top flex-c" style="padding: 5px 0px;">
							<van-dropdown-menu style="width: 100%;" class="refundactiveselect">
								<van-dropdown-item style="width: 49%;margin-right: 2%; color: #FFFFFF;"
									@change="dropitem" v-model="value1" :options="option1" />
							</van-dropdown-menu>
							<van-dropdown-menu style="width: 100%;" class="refundactiveselect">
								<van-dropdown-item style="width: 49%;" @change="dayitem" v-model="value2"
									:options="option2" />
							</van-dropdown-menu>
						</div>
					</div>
				</div>
			</div>
			<div class="height" v-if="GetOrderList"
				:style="`margin-top: 10px;width: 100%;height:${height-171}px; overflow-y: scroll;`">
				<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
					<van-list v-model="loading" :finished="finished" :immediate-check="false" :offset="10"
						:style="`min-height:${height-171}px;`" finished-text="没有更多了" @load="onLoad()">
						<div class="" v-if="succerror" style="width: 100%;text-align: center">
							<!-- 暂无数据 -->
							<img src="../../../assets/noList/nolist.png" style=" width: 50%;">
						</div>
						<div class="" v-if="GetOrderList">
							<div class="bg-f" style="padding: 15px 0px;margin-top: 15px;"
								v-for="(item,index) in GetOrderList" :key="index">
								<div class="" style="padding:0px  0px 15px;">
									<van-row>
										<van-col span="12" class="flex">
											<div class="" :style="'backgroundColor:'+item.colour"
												style="width: 7px;height: 20px;margin-right: 11px;">
											</div>
											<div class="flex-align f-bold c-0"
												style="font-size: 15px;font-weight: bold;color: #000000;font-family: auto;">
												{{item.skuName}}
											</div>
										</van-col>
										<van-col span="12">
											<div class="flex flex-align"
												:style=" item.payState==0 ? 'color:#FF0000' : 'color:#0580FF' "
												style="float: right;font-family: auto;font-size: 14px; font-weight: bold;  ">
												{{item.payStateName}}
											</div>
										</van-col>
									</van-row>
								</div>
								<div class="flex-space" style="width: 100%;height: 1px;background: #F6F7FB;"></div>
								<div class="" style="padding: 0px 10px;">
									<div class="flex-space" style="padding: 15px 0px 10px 0px;">
										<div class=""
											style="float: right;font-family: auto;font-size: 14px; font-weight: 500;color: #000000;">
											支付金额:
										</div>
										<div class=""
											style="float: right;font-family: auto;font-size: 14px; font-weight: bold;color: #15C78B;">
											{{item.totalTaxPayAmount}}
										</div>
									</div>

									<div class=""
										style="background: #F4F5F8;border-radius: 5px; padding: 15px  6px  15px  7px;">
										<div class="flex-space">
											<div class=""
												style="font-family: auto;font-size: 13px; font-weight: 500;color: #666666;">
												订单号:
											</div>
											<div class=""
												style="font-family: auto;font-size: 13px; font-weight: bold;color: #000000;">
												{{item.orderNo}}
											</div>
										</div>
										<div class="flex-space" style="margin-top: 15px;">
											<div class=""
												style="font-family: auto;font-size: 13px; font-weight: 500;color: #666666;">
												支付方式:
											</div>
											<div class=""
												style="font-family: auto;font-size: 13px; font-weight: bold;color: #000000;">
												{{item.payName}}
											</div>
										</div>
										<div class="flex-space" style="margin-top: 15px;">
											<div class=""
												style="font-family: auto;font-size: 13px; font-weight: 500;color: #666666;">
												打印状态:
											</div>
											<div class=""
												style="font-family: auto;font-size: 13px; font-weight: bold;color: #000000;">
												{{item.orderStateName}}
											</div>
										</div>
										<div class="flex-space" style="margin-top: 15px;">
											<div class=""
												style="font-family: auto;font-size: 13px; font-weight: 500;color: #666666;">
												打印张数:
											</div>
											<div class=""
												style="font-family: auto;font-size: 13px; font-weight: bold;color: #000000;">
												{{item.printQuantity}}
											</div>
										</div>
										<div class="flex-space" style="margin-top: 15px;">
											<div class=""
												style="font-family: auto;font-size: 13px; font-weight: 500;color: #666666;">
												订单时间:
											</div>
											<div class=""
												style="font-family: auto;font-size: 13px; font-weight: bold;color: #000000;">
												{{item.createTime}}
											</div>
										</div>
									</div>

									<div class="flex-c" @click="goby(item)"
										style="width: 325px;height: 33px;margin:15px 0px 0px; background: #0580FF;border-radius: 5px;font-size: 15px;font-weight: bold;font-family: auto;color: #FFFFFF;">
										退款
									</div>
								</div>
							</div>

						</div>
					</van-list>
				</van-pull-refresh>
			</div>

		</div>

		<!-- 退款金额弹窗 -->
		<van-popup v-model="show" round>
			<div class="" style=" width: 300px;height: 280px; ">
				<div class="popup_tuik"
					style="font-size: 16px; padding: 18px 132px;text-align: center;font-weight: bold;font-family: auto;color: #FFFFFF;">
					退款
				</div>
				<div id=""
					style="font-size: 19px;font-weight: bolder; font-family: auto;margin: 30px 0px;text-align: center;">
					目前打印总张数<span style="color: red;">
						{{printQuantity}}
					</span>张
				</div>
				<div class="flex-c" style="">
					<input type="number" v-model="ratetext" style="text-align: center;padding: 5px;border: 0px;"
						placeholder="请输入退款张数" />
				</div>
				<div class="flex-c"
					style="width: 250px;height: 9px;margin: auto; border: 1px solid #E8E8E8;border-top: 0px;">
				</div>
				<div class="flex-c" style="margin: 20px 0px 8px;" @click="openpopup">
					<div class=""
						style="width: 250px;height: 34px;padding: 9px 107px;font-size: 16px;color: #FFFFFF;font-weight: 500;font-family: auto;background: #0580FF;border-radius: 5px; ">
						确定
					</div>
				</div>
				<div class="flex-c" style="margin-bottom:20px;" @click="closepopup">
					<div class=""
						style="width: 250px;height: 34px;padding: 9px 107px;font-size: 16px;color: #BBBBBB;font-weight: 500;font-family: auto; border-radius: 5px; ">
						取消
					</div>
				</div>
			</div>
		</van-popup>
	</div>
</template>
<script>
	import {
		GetSPUTree
	} from '@/api/statistics/GetSPUTree.js'
	import {
		GetOrderList
	} from '@/api/statistics/GetOrderList.js'
	import {
		Refund
	} from '@/api/statistics/Refund.js'
	import {
		Toast
	} from 'vant';
	export default {
		data() {
			return {
				printQuantity: '', //当前退款的张数
				countdata: '', //总数据
				number: '',
				value1: '100',
				value2: '',
				succerror: false,
				option1: [],
				option2: [{
						text: '全部',
						value: ''
					},
					{
						text: '当天',
						value: 'day'
					},
					{
						text: '本月',
						value: 'mount'
					},
					{
						text: '本年',
						value: 'year'
					},
				],
				isLoading: false,
				userId: '', //当天 月份年份
				username: '',
				terminalId: '', //编号
				spu_content: [], //返回的spu数组
				GetOrderList: [], //内容区域
				amount: '', //金额
				spuId: '', //option选择的spuid
				finished: false,
				loading: false,
				pagesize: 10, //每页数量
				ratetext: '', //退款的张数
				show: false, //是否显示弹窗
				orderId: '', //订单id 
				height: 100, //默认高度
				pagesindex: 1, //下拉页数
				down: true, //控制反复上拉


			}
		},
		created() {
			this.query(); //获取spu
			this.GetOrder(); //获取详情列表
		},
		mounted() {
			this.client() //获取高度
		},
		methods: {
			// 键盘确定键输入的金额
			tabtoplist() {

				this.loading = false;
				this.finished = false;
				this.GetOrderList = []; //清空数组
				this.pagesindex = 1; // 页数为1
				this.GetOrder()
			},
			// 年月日
			dayitem() {
				this.loading = false;
				this.finished = false;
				this.GetOrderList = []; //清空数组
				this.pagesindex = 1; // 页数为1
				this.userId = this.value2;
				this.GetOrder(); //获取详情列表
				console.log(this.value2)

			},
			// 打印方式
			dropitem() {
				this.loading = false;
				this.finished = false;
				this.GetOrderList = []; //清空数组
				this.pagesindex = 1; // 页数为1
				this.spuId = this.value1;
				this.GetOrder(); //获取详情列表
				console.log(this.value1)
			},
			// 下拉
			onRefresh() {
				this.loading = false;
				this.finished = false;
				this.GetOrderList = []; //清空数组
				this.pagesindex = 1; // 页数为1
				console.log('下拉数显')
				this.GetOrder();
				this.isLoading = false;
			}, // 上啦
			onLoad() {
				if (this.down) {
					this.down = false;
					this.pagesindex++; //页数+1；
					this.loading = true;
					this.finished = false;
					console.log(this.pagesindex, "++1")
					this.GetOrder();


				}
			},
			client() {
				this.$nextTick(() => {
					this.height = document.body.clientHeight;
				});
			},
			goby(item) {
				console.log(item, 'item')
				this.printQuantity = item.printQuantity;
				this.orderId = item.orderId;
				this.show = true;
			},
			// 取消
			closepopup() {
				this.show = false;
			},
			// 确认退款
			// https://api.xhm2006.com/order/BizOrders/Refund
			// {
			//     "postdata": [{"field":"OrderId","value":"9DDDA134EB8B4BA69D069704220D822E"},{"field":"ItemSaleQty","value":"1"}]
			// }
			openpopup() {
				Refund({
					"postdata": [{
						"field": "OrderId",
						"value": this.orderId
					}, {
						"field": "ItemSaleQty",
						"value": this.ratetext
					}]
				}).then(res => {
					console.log(res, '退款的张数')
					if (res.success) {
						// Toast('退款成功')
						Toast({
							message: "退款成功",
							duration: 1000
						})
					}
					if (res.success == false) {
						// Toast(res.message)
						Toast({
							message: res.message,
							duration: 1000
						})
					}
					this.show = false;
				})
			},
			// 查询
			refund_search() {
				this.GetOrder();
			},
			options(event) {
				this.spuId = event.target.value;
				console.log(this.spuId, 'option');
				this.GetOrder();
			},
			query() {
				this.userId = this.$route.query.userId;
				this.username = this.$route.query.username;
				this.terminalId = this.$route.query.terminalId;
				// 获取spuid
				GetSPUTree().then(res => {
					this.spu_content = res.data;
					this.option1 = res.data;
					for (let i = 0; i < this.option1.length; i++) {
						this.option1[i].text = this.spu_content[i].label;
						this.option1[i].value = this.spu_content[i].value;
					}
					this.option1[0] = {
						children: null,
						disabled: null,
						id: null,
						isChecked: false,
						key: null,
						label: '全部',
						pid: null,
						text: "全部",
						value: '100'
					}
					console.log(this.option1, 'this.option1')
					console.log(res, 'spu')
				})
				console.log(this.$route.query.userId)
			},
			GetOrder() {
				// 上啦加载的时候数据不清空 其余的时候清空
				if (this.spu_content) {
					GetOrderList({
						"pageindex": this.pagesindex,
						"pagesize": this.pagesize,
						"postdata": [{
								"field": "spuId", //option的选择
								"value": this.spuId
							},
							{
								"field": "amount",
								"value": this.amount //金额
							},
							{
								"field": "terminalId",
								"value": this.terminalId
							},
							{
								"field": "queryType", //年月日
								"value": this.userId
							}
						]
					}).then(res => {
						console.log(res, 'quanbu')
						this.amount = '';
						this.countdata = res.datacount;
						if (res.success) {
							this.succerror = false; //暂无数据的隐藏
							this.GetOrderList.push(...res.data);
							console.log(this.GetOrderList)
							// 加载状态结束
							this.loading = false;
							this.down = true; //加载完毕节流可以继续加载下一页
							if (this.GetOrderList.length == this.countdata) { //加载下一页的时候因为之前已经有数据了所以为true不在继续执行
								this.finished = true; //只有当finished为true才不会继续加载
							}
						} else {
							// 没有数据的时候清楚状态
							this.succerror = true;
							this.loading = false;
							this.finished = true; //只有当finished为true才不会继续加载
							// Toast(res.message)
							Toast({
								message: res.message,
								duration: 1000
							})

						}
					})
				}
			},
			onClickLeft() {
				// this.$router.go(-1)
				this.$router.push({
					path: '/statistics',
					query: {
						staticDetails: true,
					}
				})
			},
		}
	}
</script>
<style lang="scss">
	/* 修复input 背景不协调 和光标变色 */
	/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
	// 背景改白色
	$bg: #fff;
	$light_gray: #fff;
	$cursor: #fff;
</style>
<style>
	.popup_tuik {
		background: url(../../../assets/newrefund/bg@2x.png) no-repeat;
		background-size: 100%;
	}

	.van-dropdown-menu__title {
		overflow: hidden;
	}

	.van-dropdown-menu__title::after {
		right: 1px;
	}

	.van-dropdown-menu__title div {
		color: #FFFFFF;
	}

	.van-dropdown-menu__bar {
		height: 35px;
	}

	.van-dropdown-menu__bar {
		background: none;
	}

	.refundactiveselect {
		height: 45px;
		color: #FFFFFF;
		/* 	width: 70px; 
		text-align: center; */
		background: url(../../../assets/newrefund/bg1@2x.png) no-repeat;
		background-size: 100%;
	}


	.van-search__action {
		color: #0580FF;
	}

	.van-search__content {
		border-radius: 8px;
	}

	.height {
		height: calc(100vh-100px);
	}

	.cell-lh .van-cell__title {
		display: flex !important;
		align-items: center !important;
	}

	input {
		/* background-color: floralwhite !important; */
		/* padding: 5px !important; */
	}

	.refund {
		margin: 0px 15px;
		height: 100vh;
	}

	.refund .refund_top {
		width: 100%;
		height: 45px;
		/* background-color: #FFFFFF; */
	}

	.refund .refund_content {
		margin: 0px 10px;
		background-color: #FFFFFF
	}

	.refund ._content {

		overflow: hidden;
		box-sizing: border-box;
		margin: 10px 10px;
		background-color: #FFFFFF;
		border-radius: 14px;
	}

	.refund div .van-cell {
		line-height: 14px !important;
	}

	.font {
		padding-top: 10px;
		font-weight: bold;
		font-size: 14px;
		font-family: revert;
	}

	select {
		/*重置Chrome和Firefox的select边框样式*/
		border: 1px solid #000;
		width: 100px;
		/*清除默认的select选择框样式*/

	}

	.bg-f {
		border-radius: 5px;
		background-color: #FFFFFF;
	}
</style>
